Overview

Previously, you recapped the procedure for retrieving data to be used in an Android app. In this exercise, you will retrieve and parse data from a remote server and store it in an SQLite database. You will implement fetching and storing the data with the help of Ktor and Room.

Scenario

To create the food menu for your Little Lemon ordering app you need to fetch data from a remote server, store and display it.

Now that your pages are set up you need to connect to the API to fetch the menu items. Below is a diagram that shows how your app needs to connect to the API via HTTP as part of the application flow.

In the case of this Little Lemon food ordering app, you need to retrieve a food menu from a remote server formatted in JSON, in the following format:

{
  "menu": [
    {
      "id": 1,
      "title": "Greek Salad",
      "description": "The famous greek salad of crispy lettuce, peppers, olives, our Chicago.",
      "price": "10",
      "image": "https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/greekSalad.jpg?raw=true",
      "category": "starters"
    },
    {
      "id": 2,
      "title": "Lemon Desert",
      "description": "Traditional homemade Italian Lemon Ricotta Cake.",
      "price": "10",
      "image": "https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/lemonDessert%202.jpg?raw=true",
      "category": "desserts"
    },
    {
      "id": 3,
      "title": "Grilled Fish",
      "description": "Our Bruschetta is made from grilled bread that has been smeared with garlic and seasoned with salt and olive oil.",
      "price": "10",
      "image": "https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/grilledFish.jpg?raw=true",
      "category": "mains"
    },
    {
      "id": 4,
      "title": "Pasta",
      "description": "Penne with fried aubergines, cherry tomatoes, tomato sauce, fresh chili, garlic, basil & salted ricotta cheese.",
      "price": "10",
      "image": "https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/pasta.jpg?raw=true",
      "category": "mains"
    },
    {
      "id": 5,
      "title": "Bruschetta",
      "description": "Oven-baked bruschetta stuffed with tomatoes and herbs.",
      "price": "10",
      "image": "https://github.com/Meta-Mobile-Developer-PC/Working-With-Data-API/blob/main/images/bruschetta.jpg?raw=true",
      "category": "starters"
    }
  ]
} 

Prerequisites

To complete this exercise, you should have already created the application onboarding and defined all of the application screens together with setting up the navigation.

Instructions

Use this URL to fetch menu items from the remote server inside your application:

https://raw.githubusercontent.com/Meta-Mobile-Developer-PC/Working-With-Data-API/main/menu.json

Step 1: Configure dependencies

• Add the Ktor dependencies to the dependencies block in the app/build.gradle file:

implementation 'io.ktor:ktor-client-android:2.1.3'
implementation "io.ktor:ktor-client-content-negotiation:2.1.3"
implementation "io.ktor:ktor-serialization-kotlinx-json:2.1.3"

• In the same file, add plugins in the plugins block:

id 'kotlin-kapt'
id 'org.jetbrains.kotlin.plugin.serialization'

• In the top-level build.gradle file, add the Kotlin serialization plugin in the plugins block:

id 'org.jetbrains.kotlin.plugin.serialization' version '1.7.20' apply false

• Now add Room dependencies to the dependencies block in the app/build.gradle file:

implementation 'androidx.room:room-runtime:2.4.3'
kapt 'androidx.room:room-compiler:2.4.3'

Step 2: Fetch the menu

As soon as you get the JSON data from the server, you must convert it to a suitable Kotlin format. To do so, complete the following steps:

• Under the application package name, create a new file called Network.kt .

• In this file, create the MenuNetworkdata class and MenuItemNetwork data class with @Serializable and @SerialName annotations. These classes contain data classes that are used to decode the object received from the server. In the MainActivityclass , create the instance of the Ktor httpClient and install ContentNegotiation with JSON.

• Use the httpClient instance to make a network call and decode the MenuNetwork instance representing menu items from the server.

Tip: The instance of the MenuNetwork class represents the entire menu. To retrieve individual menu items use the menu property of the MenuNetwork . Each item has id , title description , price and image attributes.

Step 3: Store data in a Room database

• After retrieving menu items from the network, store the menu in the local database.

• Under the application package name, create a new file called Database.kt .

• In this file, create the Database and Dao. Also create an entity data class representing the menu item with the same attributes as the menu item decoded from the JSON. In the MainActivity class, map the network data models to Room entities and save the data to the database.

Step 4: Display restaurant details

Before displaying the menu items, you need to update the Home Composable with the hero section. Implement the UI for the hero banner below the header.

• Include the information about the restaurant provided below:

  • Restaurant name: Little Lemon

  • City: Chicago

  • Short description: We are a family-owned Mediterranean restaurant, focused on traditional recipes served with a modern twist

• Also add the hero image that was provided to you in the app assets zip folder.

• The hero section should also include a search bar but you will add this in a later exercise.

Step 5: Display menu items

Define the MenuItems Composable with a single parameter representing a list of menu items. Display it below the hero section.

• Retrieve items from the database as a state and assign data to the menu items variable.

• Inside the MenuItems Composable use a Column layout to position items below each other.

• Define the MenuItems Composable representing a single menu item. Add title , price , description and image .

• In the dependencies block of the app/build.gradle file add the glide compose dependency: implementation "com.github.bumptech.glide:compose:1.0.0-alpha.1"

• Use the GlideImage library to load images using the URL present in the menu item image attribute.

Tip: To retrieve data from the database, use the observeAsState method.

Design

For reference, you’ll find an example visual mockup on which you can base your Home screen. Once again, feel free to deviate as much as you want, in case you would like to incorporate your own visual tweaks. Remember to follow the Little Lemon brand style guidelines covered in the exercise Applying design fundamentals in Figma .

Conclusion

In this reading, you developed the Home screen's hero and menu list sections. Your app can now fetch data from the remote server to create the food menu. You have also persisted the data in the local database and displayed it on screen.